<!DOCTYPE html>
<html>
    <meta charset="UTF-8" />
    <head><title></title>
        <script src="./react.development.js"></script>
        <script src="./react-dom.development.js"></script>
        <script src="./babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>

        <script type="text/babel">
            function FancyBorder(props) {
                return (
                    <div className={'FancyBorder FancyBorder-' + props.color}>
                        {props.children}    
                    </div>
                )
            }

            // Dialog 1:
            // function Dialog(props) {
            //     return (
            //         <FancyBorder color="blue">
            //             <h1 className="Dialog-title">{props.title}</h1>
            //             <p className="Dialog-message">{props.message}</p>
            //         </FancyBorder>
            //     )
            // }

            // Dialog 2:
            function Dialog(props) {
                return (
                    <FancyBorder color="blue">
                        <h1 className="Dialog-title">{props.title}</h1>
                        <p className="Dialog-message">{props.message}</p>
                        {props.children}
                    </FancyBorder>
                )
            }

            class SignUpDialog extends React.Component {
                constructor(props) {
                    super(props);
                    this.state = {login:''};

                    this.handleChange = this.handleChange.bind(this);
                    this.handleSignUp = this.handleSignUp.bind(this);
                }

                handleChange(e) {
                    this.setState({login: e.target.value});
                }

                handleSignUp() {
                    alert(`Welcom aboard, ${this.state.login}`);
                }

                render() {
                    return (
                        <Dialog title="Mars Exploration Program"
                            messge="How should we refer to you?">
                            <input value={this.state.login}
                                onChange={this.handleChange} />
                            <button onClick={this.handleSignUp}>Sign Me Up!</button>
                        </Dialog>
                    )
                }
            }

            function WelcomeDialog() {
                return (
                    <Dialog
                        title="Welcome"
                        message="Thank you for visiting our spacecraft" />
                )
            }

            function SplitPane(props) {
                return (
                    <div className="SplitPane">
                        <div className="SplitPane-left">
                            {props.left}
                        </div>
                        <div className="SplitPane-right">
                            {props.right}
                        </div>
                    </div>
                )
            }
            
            function App() {
                return (
                    <SplitPane
                        left={
                            <Contacts />
                        }
                        right={
                            <Chat />
                        } />
                )
            }

            ReactDOM.render(
                <App />,
                document.getElementById('root')
            )
        </script>
    </body>
</html>